<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7]>    <html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8]>    <html lang="en-us" class="ie8"> <![endif]-->
<!--[if gt IE 8]> <!--> <html lang="en-us">   <!--<![endif]-->
<html lang="en">
<head>
    <title>Diablo3 Effective Health Pool Calculator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    <!-- using different cdns (and some local) to spread the load a bit until I can benchmark things properly -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/vendor/json2.js"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/vendor/underscore-min.js"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/vendor/backbone-min.js"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/vendor/backbone.localStorage-min.js"></script>

    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>

    <link href="http://d3ehp-cdn.rubensayshi.com/r1385438769/css/bootstrap.css" rel="stylesheet" />
    <link href="http://d3ehp-cdn.rubensayshi.com/r1385438769/css/bootstrap-responsive.css" rel="stylesheet" />
    <link href="http://d3ehp-cdn.rubensayshi.com/r1385438769/css/style.css" rel="stylesheet" />
    <link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <span class="brand" href="#">Diablo 3 EHP Calculator</span>
                <ul class="nav pull-right">
                    <li>
                        <div class="btn-group">
                            <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-wrench icon-white"></i> Settings <span class="caret"></span></a>
                            <ul class="dropdown-menu" id="settings">
                                <li class="divider"></li>
                                <li class="nav-header">Display as</li>
                                <li id="display_as_EHP">
                                    <a href="#"><input type="radio" /> EHP (Effective Hit Points)</a>
                                </li>
                                <li id="display_as_VITeq">
                                    <a href="#"><input type="radio" /> VITeq (VIT Equivelant)</a>
                                </li>
                                <li class="divider"></li>
                            </ul>
                        </div>
                    </li>
                    <li class="cp">
                        <button class="btn btn-primary manage_chars"><i class="icon-user icon-white"></i> Manage Characters</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="container" class="container-fluid">
        <div class="row-fluid">
            <div id="content" class="span9"></div>
            <div id="sidebar" class="span3 hidden-phone">
                <div class="latest-update">
                    <h3>Latest News</h3>
                    <p><span class="label label-inverse">Patch 1.0.5</span></p>
                    <p>Changes from patch 1.0.5 are implemented!</p>

                    <p><span class="label label-inverse">Maintainer</span></p>
                    <p>As you all should have noticed by now I'm no longer actively working on this project, except for bug fixes and adding patch changes. <br />
                       If there is anyone who feels like he wants to pick up where I left this project, just contact me <a href="http://www.diablofans.com/user/71187-saikodrakie/">on diablofans.com</a>!
                    </p>
               </div>

                <div class="bugs-and-features">
                    <h3>Bugs &amp; Features</h3>
                    If you find something that's not working properly or you got a feature request, <br />
                    you can report an issue on <a href="https://github.com/rubensayshi/d3-ehp-calculator/issues?state=open">github</a>
                    or post it in the topic on the forums (<a href="http://www.diablofans.com/topic/43712-diablo3-effective-health-pool-calculator/">diablofans</a>
                                                            or <a href="http://eu.battle.net/d3/en/forum/topic/4525923896">battle.net</a>).
                </div>
                <div id="donatecontainer">
                    <div id="donate" style="text-align: center;">
                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                            <input type="hidden" name="cmd" value="_donations">
                            <input type="hidden" name="business" value="ruben@messwithyou.com">
                            <input type="hidden" name="lc" value="US">
                            <input type="hidden" name="item_name" value="D3 EHP Donation">
                            <input type="hidden" name="no_note" value="0">
                            <input type="hidden" name="currency_code" value="USD">
                            <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_SM.gif:NonHostedGuest">
                            <input style="width: auto;" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                        </form>
                    </div>
                </div>
                <div id="adcontainer">
                    <div id="ad">
                        <script type="text/javascript"><!--
                        google_ad_client = "ca-pub-2423022198923954";
                        /* Medium Rectangle (300 x 250) */
                        google_ad_slot = "5148573296";
                        google_ad_width = 300;
                        google_ad_height = 250;
                        //-->
                        </script>
                        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="templates">
        <script type="text/template" id="result-row-template">
            <tr>
                <th><%= title %></th>
                <td><input type="text" readonly="true" class="input-small form-inline ehp_<%= key %>" value="" /></td>
                <td><input type="text" readonly="true" class="input-small form-inline ehp_<%= key %>_b" value="" /></td>
                <td><input type="text" readonly="true" class="input-small form-inline ehp_<%= key %>_d" value="" /></td>
                <td><input type="text" readonly="true" class="input-small form-inline ehp_<%= key %>_bnd" value="" /></td>
            </tr>
        </script>
        <script type="text/template" id="itemcompare-result-row-template">
            <tr>
                <th><%= title %></th>
                <td>
                    <input type="text" readonly="true" class="input-msmall form-inline <%= type %>_<%= key %>" value="" />
                    <input type="text" readonly="true" class="input-xsmall form-inline <%= type %>_<%= key %> percentage" value="" />
                </td>
                <td>
                    <input type="text" readonly="true" class="input-msmall form-inline <%= type %>_<%= key %>_b" value="" />
                    <input type="text" readonly="true" class="input-xsmall form-inline <%= type %>_<%= key %>_b percentage" value="" />
                </td>
                <td>
                    <input type="text" readonly="true" class="input-msmall form-inline <%= type %>_<%= key %>_d" value="" />
                    <input type="text" readonly="true" class="input-xsmall form-inline <%= type %>_<%= key %>_d percentage" value="" />
                </td>
                <td>
                    <input type="text" readonly="true" class="input-msmall form-inline <%= type %>_<%= key %>_bnd" value="" />
                    <input type="text" readonly="true" class="input-xsmall form-inline <%= type %>_<%= key %>_bnd percentage" value="" />
                </td>
            </tr>
        </script>
        <div id="intro-template">
            <div class="row-fluid">
                <div class="span12">
                    <div class="tabbable">
                        <ul class="nav nav-tabs">
                            <li class="active"> <a href="#character-list" data-toggle="tab">Select or Create a Character</a> </li>
                            <li> <a href="#intro-ehp" data-toggle="tab">What is EHP?</a> </li>
                            <li> <a href="#intro-viteq" data-toggle="tab">What is VITeq?</a> </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div id="character-list" class="tab-pane active well">
                            <h3>Characters</h3>
                            <ul class="character-list well unstyled"></ul>
                            <button class="btn btn-success add-character"><i class="icon-user icon-white"></i> Add New Character</button>
                        </div>
                        <div id="intro-ehp" class="tab-pane well">
                            <h3>What does EHP stand for?</h3>
                            <p>I think originally EHP started as 'Effective Hit Points', over the course of years it has gotten a lot of varations and I tent to use 'Effective Health Pool'. <br />
                            </p>
                            <h3>So what is it?</h3>
                            <p>EHP is how much <em>raw</em> damage you can take before you die.
                            </p>
                            <h3>How do you calculate it?</h3>
                            <p>
                            So we calculate it by taking your HP and then adding all your damage reduction to it. <br />
                            Usually this is from multiple sources, such as armor, resistance, skills, passives, etc.
                            </p>
                            <h3>Why do you care about EHP?</h3>
                            <p>
                            Higher EHP means we can take more damage before you die, which means we can survive longer. <br />
                            </p>
                        </div>
                        <div id="intro-viteq" class="tab-pane well">
                            <h3>What does VITeq stand for?</h3>
                            <p>VITeq = VITality EQuivalent
                            </p>
                            <h3>So what is it?</h3>
                            <p>It's how much VIT a stat equals to, for example if the calculator says +10 armor is 3 VITeq then that means that 10 armor gives as much EHP as  3 VIT would give you!
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <h3>Welcome <small>to the D3 EHP Calculator</small></h3>
                    <p>This is an open source effort to provide you with a tool to (easily) calculator your EHP and
                        to be able to compare which skills and items might provide you with the greatest benefit!
                    </p>
                    <p>If you'd like to contribute or provide feedback then my prefered method is through <a href="https://github.com/rubensayshi/d3-ehp-calculator">the github project page</a>.
                        I'll do my best to merge any pull requests asap and/or discuss issues added there. <br />
                        <br />
                        For other discussions or just telling me you like the tool you can use <a href="http://www.diablofans.com/topic/43712-diablo3-effective-health-pool-calculator/">the topic on diablofans.com</a>
                    </p>
                </div>
            </div>
        </div>
        <div id="input-template">
            <div class="row-fluid">
                <div class="span12 input-character character">
                    <div class="tabbable">
                        <ul class="nav nav-tabs">
                            <li class="active"> <a href="#input-character" data-toggle="tab">Input Character Stats</a> </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div id="input-character">
                            <p><span class="badge badge-info">1</span> &nbsp; Select your class.</p>
                            <p><span class="badge badge-info">2</span> &nbsp; Type in the stats for your ingame character screen.</p>
                            <p><span class="badge badge-info">3</span> &nbsp; Select which passives / buffs you have on <strong><em>ingame</em> at this moment</strong> .</p>
                            <p><span class="badge badge-success">4</span> &nbsp; Click the 'Create Character' button to go to the next step!</p>

                            <div id="input-char-alert" class="alert alert-block">
                                <button class="close" data-dismiss="alert">x</button>
                                The stats in your ingame character screen already include a lot of your passives and buffs. <br />
                                Below you put in the stats from your character screen and tick the checkboxes for the passives and buffs you already have on you! <br />
                                That way we will be able to calculate what your stats are without those passives and we need that for good calculations :-)
                            </div>
                            <table id="base_options" class="table table-bordered table-striped table-condensed">
                                <thead>
                                    <tr>
                                        <th colspan="2">Please fill in your stats as you read them from your character screen.</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th>Your Class</th>
                                        <td>
                                            <select class="your_class"></select>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <table id="options" class="table table-bordered table-striped table-condensed">
                                <thead>
                                    <tr>
                                        <th colspan="2">Please select the passives and buffs you have on you RIGHT NOW. <span class="label label-info auto_tooltip" title="you will be able to change skills to see different setups later.">?</span></th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <table id="shared_options" class="table table-bordered table-striped table-condensed">
                                <thead>
                                    <tr>
                                        <th colspan="2">Please select the passives and buffs you have on you RIGHT NOW. <span class="label label-info auto_tooltip" title="you will be able to change skills to see different setups later.">?</span></th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <table class="table table-bordered table-striped table-condensed">
                                <tfoot>
                                    <tr>
                                        <td colspan="2" class="well" style="text-align: right;">
                                            <button class="btn btn-danger back"><i class="icon-arrow-left icon-white"></i> Cancel / Back</button>
                                            <button class="btn btn-success create-char"><i class="icon-user icon-white"></i> Create Character</button>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="item-template">
            <table id="base_options" class="table table-bordered table-striped table-condensed">
                <thead>
                    <tr>
                        <th colspan="2" class="title">
                            <span></span>
                        </th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="simulation-template">
            <div class="row-fluid">
                <div class="span12">
                    <div class="tabbable">
                        <div class="pull-right"></div>
                        <ul class="nav nav-tabs">
                            <li class="active"> <a href="#character" data-toggle="tab">Your Character</a> </li>
                            <li> <a href="#item-compare" data-toggle="tab">Item Compare</a> </li>
                            <li> <a href="#stat-weight" data-toggle="tab">Stat Weight</a> </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane character active" id="character">
                            <table id="base_options" class="table table-bordered table-striped table-condensed">
                                <thead>
                                    <tr>
                                        <th colspan="3">These are your base stats, without any passives or buffs applied.</th>
                                    </tr>
                                    <tr>
                                        <th>Option</th>
                                        <th>Choice</th>
                                        <th>Alternative</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th>Your Class</th>
                                        <td>
                                            <select class="your_class"></select>
                                        </td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                            <table id="options" class="table table-bordered table-striped table-condensed">
                                <thead>
                                    <tr>
                                        <th colspan="3">These are the passive and buffs you can have on.</th>
                                    </tr>
                                    <tr>
                                        <th>Option</th>
                                        <th>Choice</th>
                                        <th>Alternative</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <table id="extra_options" class="table table-bordered table-striped table-condensed">
                                <thead>
                                    <tr>
                                        <th colspan="3">These are the passive and buffs you can have on.</th>
                                    </tr>
                                    <tr>
                                        <th>Option</th>
                                        <th>Choice</th>
                                        <th>Alternative</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <table id="shared_options" class="table table-bordered table-striped table-condensed">
                                <thead>
                                    <tr>
                                        <th colspan="3">These are shared passive and buffs you can have on.</th>
                                    </tr>
                                    <tr>
                                        <th>Option</th>
                                        <th>Choice</th>
                                        <th>Alternative</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <table id="buffed_stats" class="table table-bordered table-striped table-condensed">
                                <thead>
                                    <tr>
                                        <th colspan="3">These are your buffed stats.</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th>Buffed Life</th>
                                        <td><input type="text" readonly="true" class="input-small form-inline life" value="" /></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <th>Buffed Dodge</th>
                                        <td><input type="text" readonly="true" class="input-small form-inline dodge" value="" /></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <th>Buffed Armor</th>
                                        <td><input type="text" readonly="true" class="input-small form-inline armor" value="" /></td>
                                        <td class="armor_reduc"></td>
                                    </tr>
                                    <tr>
                                        <th>Buffed Resistance</th>
                                        <td><input type="text" readonly="true" class="input-small form-inline resist" value="" /></td>
                                        <td class="resist_reduc"></td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="tabbable">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#character-ehp" data-toggle="tab">Defensive Results (EHP)</a></li>
                                </ul>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane active" id="character-ehp">
                                    <table class="table table-bordered table-striped table-condensed results">
                                        <thead>
                                            <tr>
                                                <th>&nbsp;</th>
                                                <th>EHP
                                                    <br /><small>base</small></th>
                                                <th>EHP
                                                    <br /><small>with block</small></th>
                                                <th>EHP
                                                    <br /><small>with dodge</small></th>
                                                <th>EHP
                                                    <br /><small>with dodge &amp; block</small></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane item-compare" id="item-compare">
                            <p><span class="badge badge-info">1</span> &nbsp; Select which item slot you want to compare.</p>
                            <p><span class="badge badge-info">2</span> &nbsp; Type in the stats for your current item.</p>
                            <p><span class="badge badge-info">3</span> &nbsp; And Type in the stats for your new item.</p>
                            <p><span class="badge badge-success">4</span> &nbsp; Check out the stat changes at the bottom of the screen!</p>

                            <div id="item-compare-alert" class="alert alert-block">
                                <button class="close" data-dismiss="alert">x</button>
                                We only compare stats for the selected slot, so when you switch to a different slot then the stats at the bottom reflect that item change, it won't display all the item changes together.
                            </div>
                            <div class="row-fluid">
                                <div class="span3">
                                    <div class="tabbable">
                                        <ul class="well nav nav-pills nav-stacked slot-list"></ul>
                                    </div>
                                </div>
                                <div class="span9">
                                    <div class="tab-content slot-list"></div>
                                </div>
                            </div>

                            <div class="tabbable">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#item-compare-ehp" data-toggle="tab">Defensive Results (EHP)</a></li>
                                    <li><a href="#item-compare-viteq" data-toggle="tab">Defensive Results (VITeq)</a></li>
                                </ul>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane active" id="item-compare-ehp">
                                <table class="table table-bordered table-striped table-condensed results">
                                    <thead>
                                        <tr>
                                            <th colspan="3">Replacing your 'Current Item' with the 'New Item' will result in the following change in EHP.</th>
                                        </tr>
                                        <tr>
                                            <th>&nbsp;</th>
                                            <th>EHP
                                                <br /><small>base</small></th>
                                            <th>EHP
                                                <br /><small>with block</small></th>
                                            <th>EHP
                                                <br /><small>with dodge</small></th>
                                            <th>EHP
                                                <br /><small>with dodge &amp; block</small></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                            <div class="tab-pane" id="item-compare-viteq">
                                <table class="table table-bordered table-striped table-condensed results">
                                    <thead>
                                        <tr>
                                            <th colspan="3">Replacing your 'Current Item' with the 'New Item' will result in the following change in VITeq.</th>
                                        </tr>
                                        <tr>
                                            <th>&nbsp;</th>
                                            <th>VITeq
                                                <br /><small>base</small></th>
                                            <th>VITeq
                                                <br /><small>with block</small></th>
                                            <th>VITeq
                                                <br /><small>with dodge</small></th>
                                            <th>VITeq
                                                <br /><small>with dodge &amp; block</small></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane statweight" id="stat-weight">
                        <table id="statweight" class="table table-bordered table-striped table-condensed">
                            <thead>
                                <tr>
                                    <th colspan="3">These are the stat weights, based on your current stats.</th>
                                </tr>
                                <tr>
                                    <th>Stat</th>
                                    <th>EHP</th>
                                    <th>VIT Equivelant <span class="label label-info auto_tooltip" title="VIT Equivelant is EHP normalized back to VIT.">?</span></th>
                                    <th>%%</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/Model/Settings.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/Model/Character.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/Model/Item.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/Model/Barbarian.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/Model/DemonHunter.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/Model/Monk.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/Model/WitchDoctor.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/Model/Wizard.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/Collection/Characters.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/Collection/ItemBag.js" type="text/javascript"></script>

    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/View/MainView.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/View/IntroView.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/View/SimulationView.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/View/InputView.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/View/ItemView.js" type="text/javascript"></script>

    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/gahandler.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/main.js" type="text/javascript"></script>
    <script src="http://d3ehp-cdn.rubensayshi.com/r1385438769/js/gaq.js" type="text/javascript"></script>
</body>
</html>
